<template>
    <div class="temrainBar">
        <h3 class="title">{{title}}</h3>
        <div class="colorCode">
            <p>
                <i></i>
                <span>今年</span>
            </p>
            <p>
                <i></i>
                <span>历年平均</span>
            </p>
        </div>
        <div class="temrainChart" id="temrainChart"></div>
    </div>
</template>

<script>
export default {
    props:['pageType'],
    data(){
        return{
            title:'',
            option:{
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '6%',
                    top:'10%',
                    containLabel: true
                },
                 tooltip: {
                    trigger: 'axis',
                   formatter:(params)=>{
                       if(params.length>1){
                           return params[0].seriesName+' : '+params[0].data+'\n'+params[1].seriesName+' : '+params[1].data
                       }else{
                           return params[0].seriesName+' : '+params[0].data
                       } 
                   }
                },
                xAxis: [
		            {
		            	type: 'category',
		            	data: ['1月', '2月', '3月','4月','5月','6月','7月','8月','9月', '10月', '11月','12月'],
		            	axisLabel: { //坐标轴刻度标签的相关设置。
		            		textStyle: {
		            			color: '#65A5BF',
		            			fontStyle: 'normal',
		            			fontSize: 12,
                            },
                            rotate:-40,
                        },
                        
		            	axisTick:{//坐标轴刻度相关设置。
		            		show: false,
		            	},
		            	axisLine:{//坐标轴轴线相关设置
		            		lineStyle:{
		            			color:'#fff',
		            			opacity:0.2
		            		}
		            	},
		            	splitLine: { //坐标轴在 grid 区域中的分隔线。
		            		show: false,
		            	}
		            }
                ],
                yAxis: [
		            {
		            	type: 'value',
		            	splitNumber: 5,
		            	axisLabel: {
		            		textStyle: {
		            			color: '#65A5BF',
		            			fontStyle: 'normal',
		            			fontSize: 12,
		            		}
		            	},
		            	axisLine:{
		            		show: false
		            	},
		            	axisTick:{
		            		show: false
		            	},
		            	splitLine: {
		            		show: true,
		            		lineStyle: {
		            			color: ['#213E5D'],
		            		}
		            	}
		            }
                ],
                series : [
                    {
                        name:'今年',
                        type:'bar',
                        data:[8,12,15,18,25,29,30,31,28,25,17,11],
                        barWidth: 12,
                        barGap:0,//柱间距离
                        itemStyle: {
                            normal: {
                                show: true,
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#2EE9F1'
                                }, {
                                    offset: 1,
                                    color: '#338091'
                                }]),
                            }
                        },
                    },
                    {
                        name:'历年平均',
                        type:'bar',
                        data:[5,12,13],
                        barWidth: 12,
                        barGap:0,//柱间距离
                        itemStyle: {
                            normal: {
                                show: true,
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#0870EF'
                                }, {
                                    offset: 1,
                                    color: '#9684FE'
                                }]),
                            }
                        },
                    }
                ]
            }
        }
    },
    watch:{
        pageType(newval){
            this.init()
        }
    },
    methods:{
        init(){
            if(this.pageType=='tem-city'){  
                this.title = '历年今年平均温度比较|℃'
                this.option.series[1].data = [8,12,15,18,25,29,30,31,28,25,17,11]
                this.option.series[0].data = [5,12,13]
            }else if(this.pageType=='tem-county'){
                this.title = '历年今年平均温度比较|℃'
                this.option.series[1].data = [8,12,15,18,25,29,30,31,28,25,17,11]
                this.option.series[0].data = [5,12,13]
            }else if(this.pageType=='rain-city'){
                this.title = '历年今年平均雨量比较mm'
                this.option.series[1].data = [88,55,55,78,98,34,56,23,67,34,32,23]
                this.option.series[0].data = [67,54,67]
            }else if(this.pageType=='rain-county'){
                this.title = '历年今年平均雨量比较mm'
                this.option.series[1].data = [88,55,55,78,98,34,56,23,67,34,32,23]
                this.option.series[0].data = [67,54,67]
            }
            this.initCharts()
        },
        initCharts(){
            let temrainChart = document.getElementById('temrainChart')
            let fsize = document.body.clientWidth/1920*16
            temrainChart.style.height = document.body.clientWidth<=1920? fsize*15+'px':'15rem'
            var myChart = this.$echarts.init(temrainChart); 
            myChart.setOption(this.option)
        }
    },
    created(){
        
    },
    mounted(){
        this.init()
    }
}
</script>
<style lang="scss" scoped>
    .temrainBar{
        width:100%;
        height:100%;
        position: relative;
        .title{
            line-height:2.3rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            text-align:center;
            height:2.3rem;
            border:.1rem solid rgba(48, 138, 199, 0.5);
            box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
            width:20rem; 
        }
        .colorCode{
            position:absolute;
            right:.5rem;
            top:0;
            height:2.3rem;
            line-height: 2.3rem;
            color:#6EBDD2;
            width:11rem;
            display:flex;
            p{
                flex:1;
                i{
                    display:inline-block;
                    width:.7rem;
                    height:1rem;
                    background: linear-gradient(to bottom, #44DFEB 0%,#278693 100%);
                }
                &:nth-child(2){
                   i{
                        background: linear-gradient(to bottom, #0272FE 0%,#9783FF 100%);    
                   }                
                }
            }
        }
        .temrainChart{
            width:100%;
            // height:15rem;
        }
    }
</style>